<template>
  <div class="data-panel">
    <el-row :gutter="10">
      <!-- 数据卡片展示 -->
      <el-col :span="6">
        <el-card class="card-item">
          <div slot="header" class="card-header">
            <span>总客户数</span>
          </div>
          <div class="card-body">
            <el-tag type="success" class="total-count">{{ totalClients }}</el-tag>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <div slot="header" class="card-header">
            <span>活跃客户数</span>
          </div>
          <div class="card-body">
            <el-tag type="warning" class="active-count">{{ activeClients }}</el-tag>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <div slot="header" class="card-header">
            <span>自理客户数</span>
          </div>
          <div class="card-body">
            <el-tag type="success" plain class="self-count">{{ selfCareClients }}</el-tag>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <div slot="header" class="card-header">
            <span>护理客户数</span>
          </div>
          <div class="card-body">
            <el-tag type="danger" plain class="care-count">{{ careClients }}</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- ECharts 图表展示 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="card-header">
            <span>客户总体统计</span>
          </div>
          <div class="chart-container">
            <div ref="chartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <div slot="header" class="card-header">
            <span>客户性别比例</span>
          </div>
          <div class="card-body">
            <div ref="pieChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 年龄分布图 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="card-header">
            <span>客户年龄分布</span>
          </div>
          <div class="card-body">
            <div ref="ageChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// 模拟数据
const totalClients = ref(0)
const activeClients = ref(0)
const checkedOutClients = ref(0)
const selfCareClients = ref(0)
const careClients = ref(0)

const genderData = ref({ male: 0, female: 0 }) // 性别统计
const ageData = ref([0, 0, 0, 0, 0]) // 年龄段分布：[20以下, 21-30, 31-40, 41-50, 50以上]

const chartRef = ref(null)
const pieChartRef = ref(null)
const ageChartRef = ref(null)

// 初始化 ECharts 图表
const initCharts = () => {
  // 客户统计图
  const myChart = echarts.init(chartRef.value)
  const option = {
    title: {
      text: '客户统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'right'
    },
    series: [
      {
        name: '客户',
        type: 'pie',
        radius: '55%',
        data: [
          { value: selfCareClients.value, name: '自理客户' },
          { value: careClients.value, name: '护理客户' },
          { value: checkedOutClients.value, name: '退住客户' },
        ]
      }
    ]
  }
  myChart.setOption(option)

  // 客户性别比例图
  const pieChart = echarts.init(pieChartRef.value)
  const pieOption = {
    title: {
      text: '客户性别统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '性别',
        type: 'pie',
        radius: '50%',
        data: [
          { value: genderData.value.male, name: '男性' },
          { value: genderData.value.female, name: '女性' }
        ]
      }
    ]
  }
  pieChart.setOption(pieOption)

  // 年龄分布图
  const ageChart = echarts.init(ageChartRef.value)
  const ageOption = {
    title: {
      text: '客户年龄分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['20以下', '21-30', '31-40', '41-50', '50以上']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: ageData.value,
        type: 'bar'
      }
    ]
  }
  ageChart.setOption(ageOption)
}

// 获取客户数据
const fetchClientData = async () => {
  try {
    const response = await axios.get('client/list') // 获取客户数据
    const clients = response

    // 进行分类计数
    totalClients.value = clients.length
    console.log("总人数", clients.length)
    activeClients.value = clients.filter(client => client.clientStatus === 1).length
    checkedOutClients.value = clients.filter(client => client.clientStatus === 0).length
    selfCareClients.value = clients.filter(client => client.clientType === '自理').length
    careClients.value = clients.filter(client => client.clientType === '护理').length

    // 性别统计
    genderData.value.male = clients.filter(client => client.clientGender === '男').length
    genderData.value.female = clients.filter(client => client.clientGender === '女').length

    // 年龄统计
    clients.forEach(client => {
      if (client.clientAge <= 20) ageData.value[0]++
      else if (client.clientAge <= 30) ageData.value[1]++
      else if (client.clientAge <= 40) ageData.value[2]++
      else if (client.clientAge <= 50) ageData.value[3]++
      else ageData.value[4]++
    })

    // 更新图表
    initCharts()
  } catch (error) {
    ElMessage.error('获取客户数据失败')
    console.error(error)
  }
}

// 页面加载时获取数据
onMounted(() => {
  fetchClientData()
})
</script>

<style scoped>
.data-panel {
  padding: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
}

.card-body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.total-count,
.active-count,
.self-count,
.care-count,
.inactive-count {
  font-size: 20px;
  padding: 5px 15px;
}

.chart-container {
  width: 600px;
  height: 200px;
}

.chart {
  width: 600px;
  height: 200px;
}

.card-item {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center;     /* 水平居中 */
}

</style>
